<template>
  <h1>el-tree组件的使用：</h1>
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    :data="data"
    show-checkbox
    default-expand-all
    node-key="id"
    highlight-current
    :props="defaultProps"
  />
  <div class="buttons">
    <el-button @click="getCheckedNodes">get by node</el-button>
    <el-button @click="getCheckedKeys">get by key</el-button>
    <el-button @click="setCheckedNodes">set by node</el-button>
    <el-button @click="setCheckedKeys">set by key</el-button>
    <el-button @click="resetChecked">reset</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTree } from "element-plus";
import type Node from "element-plus/es/components/tree/src/model/node";

interface Tree {
  id: string;
  label: string;
  children?: Tree[];
}

const treeRef = ref<InstanceType<typeof ElTree>>();

const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedNodes(false, false));
};
const getCheckedKeys = () => {
  console.log(treeRef.value!.getCheckedKeys(false));
};
const setCheckedNodes = () => {
  treeRef.value!.setCheckedNodes(
    [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 9,
        label: "Level three 1-1-1",
      },
    ] as Node[],
    false
  );
};
const setCheckedKeys = () => {
  treeRef.value!.setCheckedKeys(["3","2","5-1"], false);
};
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false);
};

const defaultProps = {
  children: "children",
  label: "label",
};

const data: Tree[] = [
  {
    id: "1",
    label: "工作台"
  },
  {
    id: "2",
    label: "首页"
  },
  {
    id: "3",
    label: "轮播图",
    children: [
      {
        id: "3-1",
        label: "轮播图列表"
      },
      {
        id: "3-2",
        label: "轮播图添加",
      },
    ],
  },
  {
    id: "4",
    label: "操作人员管理",
    children: [
      {
        id: "4-1",
        label: "操作人员列表"
      },
      {
        id: "4-2",
        label: "操作人员添加",
      },
    ],
  },
  {
    id: "5",
    label: "商品管理",
    children: [
      {
        id: "5-1",
        label: "所有商品",
      },
      {
        id: "5-2",
        label: "推荐商品",
      },
      {
        id: "5-3",
        label: "秒杀商品",
      }
    ],
  },
];
</script>
